// 使用cropper 提供的刚发 实现剪裁去的创建
// 先找到剪裁区的图片
// 设置配置项
// 调用cropper方法 创建剪裁区



// 1.找到用的图片
let image = $('#image');

// 2.设置配置项
let option = {
  // 纵横比(宽高比)
  aspectRatio: 1, // 正方形
  // 指定浏览区域
  preview: '.img-preview' // 指定预览区的类名（选择器）
}
// 3.调用cropper方法 创建剪裁区
image.cropper(option);



// -------------点击按钮选择图片-----------------
// button按钮之前有一个文件域input   是点击按钮触发文件域的单击事件

$('button:contains("上传")').on('click',function(){
  $('#file').trigger('click');
})

// -------------更换图片---------
// 文件域是change事件  要用到文件对象
$('#file').on('change',function(){
  if(this.files.length >0) {
    // 创建文件对象
    let fileobj = this.files[0];
    // 给文件对象创建临时url
    let url = URL.createObjectURL(fileobj);
    // 更换图片 
    image.cropper('destroy').attr('src',url).cropper(option);
    image.cropper('replace',url);
  }
});

// -----------点击更换------------
// 调用cropper方法 传递getCroppedCanvas参数 调用画布的toDataURL() 方法，得到base64格式的图片
// ajax提交请求

$('#sure').on('click', function () {
  let canvas = image.cropper('getCroppedCanvas', {width: 30, height: 30});
  // canvas转成base64格式字符串
  let base64 = canvas.toDataURL('image/jpeg',0.3);
	axios.post(`/my/user/avatar`, `avatar=${encodeURIComponent(base64)}`).then(res => {
    let {data: {status, message}} = res;
    if (status === 0) {
      layer.msg(message)
      // 更新index.html的头像
      window.parent.getUserInfo()
    }
  });
})